{% extends 'BASE/base.html' %}
{% block css %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/Index/index.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/Comic/cover.css' %}"/>
{% endblock %}
{% block js %}
<script src="{% static 'js/Novels/novels_cover.js' %}" type="text/javascript" charset="utf-8"></script>
{% endblock %}
{% block title %} {{novel.fName}}-书漫网O(∩_∩)O哈哈~ {% endblock %}
{% block main %}
<div class="container" id="fId" fId="{{novel.fId}}">
	<div class="row mt-4">
		{# 小说封面 #}
		<div class="col-4">
			{#{% url 'Novels:readingRoom' novel.fId novel.history.readagain.chapters %}#}
			<a href="{% url 'Novels:readingRoom' novel.fId novel.history.readagain.chapter %}">
				<figure class="figure" id="cover">
					<img src="{{novel.fCover}}" class="figure-img img-fluid rounded" alt="{{novel.fName}}">
					<figcaption class="figure-caption text-center">
						{% if novel.history.read %}
						{{novel.history.readagain.bookName}}
						{% else %}
						开始阅读
						{% endif %}
					</figcaption>
					<span class="{% if comic.collect %}collected{% endif %}
                    btn zi zi_starLine zi_2x d-none" id='collected-start'
						  style="position: absolute; top: 0; padding: 0; margin: 0;"></span>
				</figure>
			</a>
		</div>
		<div class="col">
			{# 小说介绍 #}
			<div class="row">
				<div>{{novel.fName}}</div>
			</div>
			<div class="row">
				<div>作者:{{novel.fAuthor}}</div>
			</div>
		</div>
	</div>
	<hr>
	{# 目录 #}
	<div class="row">
		<div class="col">
			<div class="row">
				<div class="col" id='sort'>
					<button class="btn btn-light btn-block" id='asc'>升序</button>
					<button class="btn btn-light btn-block d-none mt-0" id='desc'>降序</button>
				</div>
			</div>
			<div class="row mt-2" id='catalog'>
				{# 展示所有目录 #}
				{% for catalog,catalogData in novel.books_info.items %}
				<div class="col-2">
					<a href="{% url 'Novels:readingRoom' novel.fId catalog %}">{{catalogData.bookName}}</a>
				</div>
				{% endfor %}
			</div>
		</div>
	</div>
</div>
{% endblock %}
